<script setup lang="ts">
import { ref } from "vue";
import { Delete, Edit, Setting } from "@element-plus/icons-vue";
defineProps<{
  id: number;
}>();

// 确定删除
const confirm = (id) => {
  //   发送请求  删除用户  需要传id
  console.log(id);
  //   删除成功
  // 更新列表数据     子传父
};

// 取消删除
const cancel = (e: MouseEvent) => {
  console.log(e);
  //   message.error("Click on No");
};

const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};
</script>

<template>
  <div>
    <el-row>
      <el-tooltip content="编辑" placement="top">
        <el-button type="primary" :icon="Edit" circle @click="showModal" />
      </el-tooltip>

      <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </a-modal>

      <el-tooltip content="删除" placement="top">
        <!-- 解决警告！！！！！ 套一个div标签 -->
        <div>
          <a-popconfirm
            title="您确认删除吗"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(id)"
            @cancel="cancel"
          >
            <el-button type="danger" :icon="Delete" circle />
          </a-popconfirm>
        </div>
      </el-tooltip>

      <el-tooltip content="设置" placement="top">
        <el-button type="primary" :icon="Setting" circle />
      </el-tooltip>
    </el-row>
  </div>
</template>
